<template>

	<view>
		<!-- 缩略图 -->
		<view>

			<view class="content-item">
				<!-- 上 -->
				<view class="content-wrapper">
					<image class="content-image" src="../../static/temp/cate3.jpg"></image>
					<view class="content-details">
						<view class="content-info">
							<view class="content-title">
								<text>{{goods.title}}</text>
							</view>
							<view class="tag-box">
								<tag :text="'未上架'" :type="'warning'" :class="'tag-yellow'" />
							</view>

							<view class="content-instruction">
								<text>作者:{{userInfo.nickname}}</text>
							</view>

							<view class="content-price">
								<view>
									<text>上传时间:{{goods.date}}</text>
								</view>
							</view>
							<view>
								<uni-icons type="pulldown" size="20" color="white"></uni-icons>
							</view>



						</view>
					</view>
				</view>

			</view>

		</view>


		<!-- 设置售价 -->
		<view class="info-item">
			<text class="label">设置售价</text>
			<input placeholder="请输入价格"></input>
		</view>

		<!-- 数据详情 -->
		<view class="list-item">
			<text>收款账户</text>
			<view class="list-item-text">
				<text>钱包A</text>
				<uni-icons type="right" size="22" color="grey"></uni-icons>
			</view>

		</view>

		<!-- 收入 -->
		<view class="income-box">
			<view class="text">
				<text>预计收入</text>
			</view>
			<view class="text-price">
				<text class="text-g">总售价</text>
				<text>￥800.00</text>
			</view>
			<view class="text-price">
				<text class="text-g">服务费</text>
				<text>-￥20.00</text>
			</view>
			<view class="text-end">
				<text class="text-g">预计到手：</text>
				<text>￥800.00</text>
			</view>
		</view>

		<!-- 数据详情 -->
		<view class="detail">
			<uni-title type="h2" title="数据详情" color="white"></uni-title>
			<text>页面统计上报只会上报一次，如多个组件开启，则只上报最后一个组件的内容，所以如非必要请不要多个组件同时开启统计</text>
		</view>

		<view class="detail">
			<uni-title type="h2" title="说明" color="white"></uni-title>
			<text>页面统计上报只会上报一次，如多个组件开启，则只上报最后一个组件的内容，所以如非必要请不要多个组件同时开启统计</text>
		</view>

		<view class="button-v">
			<button class="button-cz">立即共享</button>
		</view>


	</view>


</template>

<script>
	import {
		mapState
	} from 'vuex';
	import tag from "@/components/min/tag.vue";

	export default {
		data() {
			return {

				goods: {
					title: "VR视觉体验指标数据包",
					date: "2025-3-25 12:09:23"
				}

			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		components:{
			tag
		},
		methods: {
			showFullContent(item) {
				// handle displaying the full content of the selected item
				console.log(item.fullContent);
			}
		}
	}
</script>

<style lang="scss">
	page{
		padding: 0 20upx ;
	}
	

	.content-wrapper {
		display: flex;
		align-items: center;

		.content-image {
			width: 250upx;
			height: 260upx;
			border-radius: 25upx;
		}

		.content-details {
			flex: 1;
			margin-left: 10px;
			display: flex;
			flex-direction: column;
			/* 让内容垂直排列 */
			justify-content: space-between;
		}

	}



	.section {
		background-color: $bg-color;
		color: white;
		font-size: $font-base +5upx;
	}

	.content-info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 300upx;
		padding: 0 0 30upx 0;

		.content-title {

			overflow: hidden;
			/* 超出部分隐藏 */
			display: -webkit-box;
			-webkit-line-clamp: 2;
			/* 设置最大行数 */
			-webkit-box-orient: vertical;
			color: white;

			margin: 0 0 10upx 0;
			padding: 10upx;


		}

		.tag-box {
			margin: 0upx 0 20upx 0;
		}


	}



	.content-details {
		margin-top: 5px;
		/* 设置时间与标题间距 */
		color: darkgray;

	}

	.content-price {
		margin: 10upx 0;
		color: $font-color-grey;
		display: flex;
		justify-content: space-between;
	}

	.info-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: $bg-color;
		margin-bottom: 20upx;
		padding: 10upx 30upx;
		border-radius: 25upx;

		.label {
			width: 200rpx;
			height: 110upx;
			color: #fafafa;
			font-size: $font-base +5upx;
			line-height: 100upx;

		}

		input {
			width: 200upx;
		}
	}



	.list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10upx;
		color: #fff;
		background-color: $bg-color;
		margin-bottom: 20upx;
		padding: 40upx 30upx;
		border-radius: 25upx;
		
	}

	.income-box {
		background-color: $bg-color;
		color: white;
		padding: 20upx;
		margin-bottom: 20upx;
		border-radius: 25upx;

		.text {
			font-size: $font-base +10upx;
			padding: 20upx 0 5upx 15upx;
		}

		.text-price {
			display: flex;
			justify-content: space-between;
			padding: 15upx;
		}

		.text-end {
			display: flex;
			justify-content: flex-end;
		}

		.text-g {
			color: $font-color-grey;
		}

	}

	.detail {
		background-color: $bg-color;
		color: darkgray;
		margin-bottom: 20upx;
		padding: 20upx;
		border-radius: 25upx;

	}

	input {
		color: #fafafa;
	}

	.button-cz {
		background: linear-gradient(to top, #5eba8f, #5292f8);
		color: #fff;
		height: 80upx;
		width: 95%;
		line-height: 80upx;
		border-radius: 25upx;
		font-size: $font-base;
		position: fixed;
		bottom: 0;

	}
</style>